<template>
	<view class="mosk">
		<view> 请谨慎填写，填写完后将不可修改内容！ </view>
		<view> 基本信息 </view>
		<view class="mosk-box">
			<view class="mosk-form">
				<view class="mosk-form-title">
					<text>收货人</text>
					<input v-model="obj.consignee" placeholder="请输入收货人姓名" placeholder-style="color:#A5A5A5"
						maxlength="10" type="text">
				</view>
				<view class="mosk-form-title">
					<text>手机号</text>
					<input v-model="obj.phonenumber" placeholder="请输入收货人手机号" placeholder-style="color:#A5A5A5"
						maxlength="11" type="phone">
				</view>
				<view class="mosk-form-title">
					<text>地址</text>
					<view class="item-address">
						<ChangAddres @change="change" style="width: 400rpx;	height: 120rpx;" :level="3">
							<view class="address">
								{{obj.address||'请选择地址'}}
							</view>
						</ChangAddres>
						<uni-icons type="forward" size="18" class="icons"></uni-icons>
					</view>
				</view>
				<view class="mosk-form-title  last">
					<text>详细地址</text>
					<input v-model="obj.detailedAddress" placeholder="如街道、门牌号等" placeholder-style="color:#A5A5A5"
						type="text">
				</view>
			</view>
			<view v-if="!specsFlag" class="list-title"> 尺码 </view>
			<view v-if="!specsFlag" class="mosk-box-list">
				<view class="" v-for="(item,i) in list" :key="i">
					<view class="">
						{{item.title}}
					</view>
					<view :class="item.status?'active':'defut'" @click="onchangeStatus(i)">
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit"> 领取 </view>
	</view>
</template>
<script>
	import ChangAddres from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default ({
		props: {
			id: {
				type: Number,
				default: 0
			},
		},
		components: {
			ChangAddres,
		},
		data() {
			return {
				list: [{
					title: '小号适合身高（150-170）',
					status: true
				}, {
					title: '中号适合身高（165-175）',
					status: false
				}, {
					title: '大号适合身高（175－220）',
					status: false
				}],
				changeIndex: 0,
				obj: {
					id: '', //活动id
					consignee: '', //收货人
					phonenumber: '', //手机号码
					address: '', //地址
					detailedAddress: '', //详细地址
					tradeName: '', //商品名称
					productSpecifications: '', //商品规格
				},
				id: '',
				specsFlag: ''
			}
		},
		onLoad(options) {
			let obj = JSON.parse(options.obj)
			this.id = obj.id
			this.specsFlag = obj.specsFlag
		},
		updated() {
			if (!this.obj.tradeName) {
				this.obj.tradeName = '小号适合身高（150-170）'
				this.obj.productSpecifications = '小号适合身高（150-170）'
			}
			uni.setStorageSync('buyClose1', this.obj)
			uni.setStorageSync('changeIndex', this.changeIndex)
		},
		onShow() {
			uni.getStorageSync('buyClose1') && (this.obj = uni.getStorageSync('buyClose1'))
			this.changeIndex = uni.getStorageSync('changeIndex')
			this.list.forEach((v, i) => {
				this.changeIndex == i ? v.status = true : v.status = false
			})
		},
		methods: {
			// picker 回调
			change(result) {
				this.obj.address = ''
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.obj.address += item.name
					} else {
						this.obj.address += '-' + item.name
					}
				})
				let arr = this.obj.address.split('-');
			},
			submit() {
				if (this.changeIndex == 0) {
					this.obj.tradeName = this.list[this.changeIndex].title
					this.obj.productSpecifications = this.list[this.changeIndex].title
				}
				this.obj.activityId = this.id
				if (this.specsFlag) {
					this.obj.tradeName = ''
					this.productSpecifications = ''
				}
				this.$fetch(this.$api.choose_size, {
					...this.obj,
					id: this.id
				}, 'POST').then(res => {
					let {
						data,
						code,
						msg
					} = res
					if (code) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					if (msg.includes('成功')) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/sendCode/list',
							})
						}, 500)
					}
				})
			},
			onchangeStatus(e = 0) {
				this.changeIndex = e
				this.list.forEach((v, i) => {
					e == i ? v.status = true : v.status = false
				})
				this.obj.tradeName = this.list[e].title
				this.obj.productSpecifications = this.list[e].title
			},
		},
	})
</script>
<style lang="scss" scoped>
	.mosk {
		overflow: hidden;

		&>view:first-child {
			font-size: 28rpx;
			font-weight: bold;
			color: #FF3F20;
			margin: 30rpx 0 10rpx 48rpx;
			height: 40rpx;
		}

		&>view:nth-child(2) {
			font-size: 28rpx;
			font-weight: bold;
			color: #262626;
			margin: 0 0 20rpx 48rpx;
			height: 40rpx;
		}

		&-box {
			width: 100vw;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-list {
				width: 694rpx;
				background: #fff;
				border-radius: 24rpx;

				&>view {
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>view:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
						color: #1A1A1A;
						margin-left: 22rpx;
					}

					// 按钮
					.defut {
						margin-right: 20rpx;
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						border: 4rpx solid #F1F1F5
					}

					.active {
						width: 44rpx;
						height: 44rpx;
						border: 4rpx solid #FCC928;
						opacity: 1;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
					}

					.active::after {
						content: '';
						width: 24rpx;
						height: 24rpx;
						background: #FCC928;
						box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(252, 201, 40, 0.3);
						border-radius: 50%;
					}
				}
			}

			.list-title {
				font-size: 28rpx;
				width: 694rpx;
				font-weight: bold;
				color: #262626;
				text-align: left;
				margin: 60rpx 0 30rpx 48rpx;
			}

			// 表单
			.mosk-form {
				width: 694rpx;
				background: #FFF;
				border-radius: 0rpx;
				margin: 0 auto;
				border-radius: 24rpx;

				&-title {
					display: flex;
					width: 100%;
					height: 120rpx;
					align-items: center;
					margin-left: 20rpx;

					text {
						font-size: 32rpx;
						font-weight: bold;
						color: #1A1A1A;
						width: 128rpx;
						margin-right: 80rpx;
						flex-shrink: 0;
					}

					.item-address {
						display: flex;
						align-items: center;
						height: 120rpx;
						overflow: hidden;
						justify-content: space-between;

						.address {
							flex-shrink: 0;
							width: 180px;
							height: 120rpx;
							text-wrap: nowrap;
							line-height: 120rpx;
						}

						.icons {
							flex-shrink: 0;
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	.btn {
		width: 694rpx;
		height: 98rpx;
		background: #FCC928;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(252, 201, 40, 0.4);
		border-radius: 12rpx;
		margin: 100rpx auto;
		line-height: 98rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
</style>